<div class="box-container">
  <div class="main-content">
    <div class="main-content-wrap">
      <div class="left-panel">
        <nz-tree
          [nzData]="treeData"
          (nzClick)="checkDetail($event)"
          [nzSelectedKeys]="defaultKeys"
          [nzExpandedKeys]="expandKeys"
          [nzTreeTemplate]="treeNode"
        >
        </nz-tree>
        <ng-template #treeNode let-node>
          <div class="custom-node" [class.active]="activedNode?.key === node.key">
            <span class="span-node">{{node.title}}</span>
          </div>
        </ng-template>
      </div>

      <div class="right-panel">
        <div class="right-top-box">
          <div class="right-content">
            <nz-card [nzTitle]="stationName + '补水量过程线'"
                     class="card">
              <div
                echarts
                [options]="processOpt"
                [merge]="processOptChange"
                style="height: 329px;"
              ></div>
            </nz-card>

            <nz-card [nzTitle]="stationName + '旬月特征值对比'"
                     class="card" [nzExtra]="xytzzCardTemplate">
              <div
                echarts
                [options]="monthOpt"
                [merge]="monthOptChange"
                style="height: 320px;"
              ></div>
            </nz-card>
            <ng-template #xytzzCardTemplate>
              <div class="card-search-wrap">
                <div>
                  <!--<span>特征值：</span>-->
                  <nz-select
                    style="width: 100px;"
                    [(ngModel)]="valType"
                    (ngModelChange)="changeMonthChart()"
                    [nzAllowClear]="true"
                    nzPlaceHolder="特征值选择"
                  >
                    <nz-option
                      *ngFor="let item of valTypeOptions"
                      [nzValue]="item.value"
                      [nzLabel]="item.label"
                    ></nz-option>
                  </nz-select>
                </div>
                <div>
                 <!-- <span>时间类型：</span>-->
                  <nz-select
                    style="width: 70px;"
                    [(ngModel)]="dateType"
                    [nzAllowClear]="true"
                    nzPlaceHolder="时间类型">
                    <nz-option
                      *ngFor="let item of dateTypeOptions"
                      [nzValue]="item.value"
                      [nzLabel]="item.label"></nz-option>
                  </nz-select>
                </div>
                <div>
                  <!--<span>历史年段：</span>-->
                  <nz-year-picker
                    style="width: 80px;"
                    [(ngModel)]="year1"
                    nzPlaceHolder=""></nz-year-picker>
                  &nbsp;至&nbsp;
                  <nz-year-picker
                    style="width: 80px;"
                    [(ngModel)]="year2"
                    nzPlaceHolder=""></nz-year-picker>
                </div>
               <!-- <div>
                  当前年：{{ curYear }}
                </div>-->
                <div>
                  <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryMonthList()"></i>
                </div>
              </div>
            </ng-template>

            <nz-card [nzTitle]="stationName + '特征及统计值'"
                     class="card" [nzExtra]="tzjtjzCardTemplate">
              <form
                [nzLayout]="'vertical'"
                nz-form [formGroup]="featureForm"
                class="form-content">
                <div nz-row [nzGutter]="36">
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>最大值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="最大值" formControlName="maxVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>最小值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="最小值" formControlName="minVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>最大值出现时间</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="最大值出现时间" formControlName="maxTime">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>最小值出现时间</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="最小值出现时间" formControlName="minTime">
                      </nz-form-control>
                    </nz-form-item>
                  </div>

                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>平均值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="平均值" formControlName="avgVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>中位值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="中位值" formControlName="medianVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>前3年平均值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="前3年平均值" formControlName="last3AvgVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col [nzSpan]="12">
                    <nz-form-item>
                      <nz-form-label>前3年中位值</nz-form-label>
                      <nz-form-control>
                        <input nz-input placeholder="前3年中位值" formControlName="last3MedianVal">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </form>
            </nz-card>
            <ng-template #tzjtjzCardTemplate>
              <a nz-button nzType="default" (click)="exportTzz()">导出</a>
            </ng-template>

            <nz-card [nzTitle]="stationName + '历史同期对比'"
                     class="card" [nzExtra]="lstqCardTemplate">
              <div
                echarts
                [options]="historyOpt"
                [merge]="historyOptChange"
                style="height: 291px;"
              ></div>
            </nz-card>
            <ng-template #lstqCardTemplate>
              <div class="card-search-wrap">
                <div>
                  <!--<span>类型：</span>-->
                  <nz-select
                    [(ngModel)]="hType"
                    [nzAllowClear]="true"
                    nzPlaceHolder="类型"
                  >
                    <nz-option
                      *ngFor="let item of historyTypes"
                      [nzValue]="item.value"
                      [nzLabel]="item.label"
                    ></nz-option>
                  </nz-select>
                </div>
                <div>
                  <!--<span>历史年：</span>-->
                  <nz-year-picker
                    style="width: 80px;"
                    [(ngModel)]="historyYear1"
                    nzPlaceHolder="历史年份1"></nz-year-picker>
                  vs
                  <nz-year-picker
                    style="width: 80px;"
                    [(ngModel)]="historyYear2"
                    nzPlaceHolder="历史年份2"></nz-year-picker>
                </div>
                <div>
                  <span>时间：</span>
                  <nz-range-picker
                    style="width: 160px"
                    nzFormat="MM-dd"
                    [nzPlaceHolder]="['开始时间', '结束时间']"
                    [(ngModel)]="historyRangeValue"
                    ></nz-range-picker>
                </div>
                <div>
                  <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryHistory()"></i>
                </div>
              </div>
            </ng-template>

            <nz-card [nzTitle]="stationName + '监测数据'"
                     [nzBodyStyle]="{height: '460px'}"
                     class="card" [nzExtra]="tzjtjzCardTemplate">
              <nz-table
                #dataTable
                nzBordered
                [nzData]="tableData"
                nzShowPagination
                nzSize="middle"
              >
                <thead>
                <tr>
                  <th>日期</th>
                  <th>补水量</th>
                  <th>累计补水量</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let row of dataTable.data">
                  <td>{{ row.time }}</td>
                  <td>{{ row.val }}</td>
                  <td>{{ row.valTotal }}</td>
                </tr>
                </tbody>
              </nz-table>
            </nz-card>




          </div>
        </div>
      </div>
    </div>
  </div>
</div>

